<template>
    <view class="goods_box">
        <table>
            <tr>
                <td>序号</td>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <tr v-for="(val, index) in goods" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ val.name }}</td>
                <td>{{ val.price }}</td>
                <td>{{ val.chooseNum }}</td>
                <td>{{ val.total }}</td>
                <td>
                    <button>减少</button>
                    <button>增加</button>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr>
        </table>
    </view>
</template>

<script>
export default {
    // 代码校验工具 可能认为 【goods】是错误单词
    name: 'GoodsPage',
    data() {
        return {
            goods: [
                {
                    name: '冰红茶',
                    price: 5,
                    chooseNum: 56,
                    total: 0,
                    optConfig: undefined
                }, {
                    name: '绿茶',
                    price: 5,
                    chooseNum: 56,
                    total: 0,
                    optConfig: undefined
                }, {
                    name: '脉动',
                    price: 5,
                    chooseNum: 56,
                    total: 0,
                    optConfig: undefined
                },
            ]
        };
    }
};
</script>

<style lang="scss">
table {
    margin: auto;
    border: solid 1px;

    td {
        border: solid 1px;
    }
}
</style>